<!-- 结果列表 -->
<template>
	<view class="reward-list-packbox relative flex flex-wrap"
	:style="{
		'padding': getTicketNum ? '60rpx 22rpx 0rpx' : '0rpx 22rpx',
	}"
	>
		<view :class="['reward-item', 'relative', rerwardAnimateClass]" v-for="(item, index) in awardData" :key="index">
			<image class="reward-type-lever absolute"
				:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + (item.reward_item_type && item.reward_item_type.toLowerCase()) + '.png'"
				mode="heightFix"></image>
				
			<image class="reward-type-gift absolute"
				v-if="item.type === 5"
				:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-gift.png`"
				mode="heightFix"></image>
				
			<image class="absolute"
				v-if="item.gyms_scene_change === 1"
				style="width: 33rpx;height: 27rpx;right: 4rpx;top: 4rpx;z-index: 100;"
				:src="`${commonConfigs.domainFrontFileLink}/files/images/challenge/ticket-icon.png`"
				mode=""></image>
				
			<image
				v-if="(commonConfigs && commonConfigs.domainFrontFileLink) && ['SP', 'A'].includes(item.reward_item_type.toUpperCase())"
				:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-new-${item.reward_item_type.toUpperCase()}-light.png`"
				:class="['absolute', 'reward-type-border', item.reward_item_type.toUpperCase() + '-light-border']" mode=""></image>
			
			<view class="reward-img flex flex-all-center relative">
				<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
					:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/small-border-${item.reward_item_type.toLowerCase()}.png`"
					class="bg relative" mode=""></image>

				<comPlaceImage class="reward-cover" placeImageClass="flex-all-center" :lazyLoad="true"
					:src="item.reward_item_cover" mode="heightFix"></comPlaceImage>
			</view>
			
			<view class="reward-name truncate">
				{{ item.reward_item_name }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'comRewardList',
		props: {
			awardData: Array,
			rerwardAnimateClass: String,
			getTicketNum: Number,
		},
		data() {
			return {
				animateClass: ''
			};
		},
		watch: {
			rerwardAnimateClass: {
				handler(val) {
					this.animateClass = val;
				},
				immediate: true,
				deep: true
			}
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			}
		},
		methods: {}
	};
</script>

<style lang="scss" scoped>
	.reward-list-packbox {

		.reward-item {
			width: 144rpx;
			margin: 10rpx 6rpx 12rpx 6rpx;
			color: #111111;

			&:nth-child(3n) {
				margin-right: 6rpx;
			}

			&:nth-child(4n) {
				margin-right: 0;
			}

			.reward-type-border {
				width: 144rpx;
				height: 169rpx;
				top: -30rpx;
				left: -48rpx;
			}

			.SP-light-border {
				width: 160rpx;
				height: 170rpx;
				top: 6rpx;
				left: -8rpx;
				z-index: 10;
			}

			.A-light-border {
				width: 160rpx;
				height: 170rpx;
				top: 6rpx;
				left: -8rpx;
				z-index: 10;
			}
			
			.reward-type-lever {
				max-width: 100rpx;
				height: 32rpx;
				left: 4rpx;
				top: 4rpx;
				z-index: 99;
			}
			
			.reward-type-gift {
				width: 78rpx;
				height: 68rpx;
				left: -12rpx;
				top: -12px;
				z-index: 99;
			}

			.reward-img {
				width: 144rpx;
				height: 169rpx;
				overflow: hidden;

				.reward-cover {
					width: 114rpx;
					height: 120rpx;
					margin-top: 20rpx;
				}
			}

			.reward-name {
				margin-top: 6rpx;
				text-align: center;
				color: #111111;
			}
		}
	}
</style>